<script setup lang="ts">
import Notification from '@/components/Notification.vue'
import { MoreFilled, Search } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import dayjs from 'dayjs'
import { adminDeleteNotificationService, adminGetNotificationService } from '@/api/admin'
import { useCountStore } from '@/stores/TeaStatisticsCount'

const dateTime = ref([])

const searchForm = ref({
  title: '',
  publisherName: '',
  beginTime: dateTime.value[0] ? dayjs(dateTime.value[0]).format('YYYY-MM-DD') : null,
  endTime: dateTime.value[1] ? dayjs(dateTime.value[1]).format('YYYY-MM-DD') : null,
  currentPage: 1, // 这里通常分页的页码从1开始
  pageSize: 5
})

// 监听 dateTime 的变化并更新 beginTime 和 endTime
watch(
  dateTime,
  (newVal) => {
    if (!newVal || newVal.length === 0) {
      // dateTime 为 null 或空数组时
      searchForm.value.beginTime = null
      searchForm.value.endTime = null
    } else {
      // 更新 beginTime 和 endTime
      searchForm.value.beginTime = newVal[0] ? dayjs(newVal[0]).format('YYYY-MM-DD') : null
      searchForm.value.endTime = newVal[1] ? dayjs(newVal[1]).format('YYYY-MM-DD') : null
    }
  },
  { deep: true } // 开启深度监听
)

const getNotificationList = async () => {
  console.log(searchForm.value)
  const res = await adminGetNotificationService(searchForm.value)
  notificationList.value = res.data.data.records
  totalPage.value = res.data.data.total
  console.log(res.data.data.records)
}

const totalPage = ref()

getNotificationList()

const notificationList = ref([])

const isDetailSearch = ref(false)

const detailSearch = () => {
  getNotificationList()
  isDetailSearch.value = false
}

const deleteNotification = async (id: number) => {
  await ElMessageBox.confirm('确认删除此条公告吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await adminDeleteNotificationService(id)
  await ElMessage.success('删除成功')
  await getNotificationList()
  await useCountStore().getContentCount()
}
</script>

<template>
  <div class="main">
    <div class="search-area">
      <el-input
        v-model="searchForm.title"
        style="width: 200px"
        placeholder="标题"
        :prefix-icon="Search"
      />
      <el-button type="primary" @click="getNotificationList">搜索</el-button>
      <el-button type="success" @click="isDetailSearch = true">高级搜索</el-button>
    </div>

    <el-scrollbar height="70vh" style="margin-top: 20px">
      <div v-for="notification in notificationList" :key="notification.id">
        <Notification>
          <template #title>
            {{ notification.title }}
          </template>
          <template #delete>
            <el-dropdown style="margin-right: 20px">
              <el-icon>
                <MoreFilled />
              </el-icon>
              <template #dropdown>
                <el-dropdown-item @click="deleteNotification(notification.id)"
                  >删除
                </el-dropdown-item>
              </template>
            </el-dropdown>
          </template>
          <template #publisher>
            {{ notification.publisherName }}
          </template>
          <template #createTime>
            {{ notification.createTime }}
          </template>
          <template #content>
            <p v-html="notification.content"></p>
          </template>
        </Notification>
      </div>
      <h3 v-if="notificationList.length === 0" style="text-align: center">——没有任何公告——</h3>
    </el-scrollbar>
    <div class="pagination-area">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalPage"
        default-page-size="5"
        v-model:current-page="searchForm.currentPage"
        @current-change="getNotificationList"
      />
    </div>
  </div>

  <el-dialog v-model="isDetailSearch" width="400" title="高级搜索">
    <div class="detailSearch-area">
      <el-input
        v-model="searchForm.title"
        style="width: 100%"
        placeholder="标题"
        :prefix-icon="Search"
      />
      <el-input
        style="width: 100%"
        v-model="searchForm.publisherName"
        placeholder="发布者"
      ></el-input>
      <div style="height: 50px; width: 100%">
        <el-date-picker
          v-model="dateTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="default"
        />
      </div>
      <div style="display: flex; justify-content: space-between">
        <el-button style="width: 40%" type="primary" @click="detailSearch">搜索</el-button>
        <el-button style="width: 40%" type="danger">清空</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>
.main {
  position: relative;
}

.search-area {
  display: flex;
  width: 40%;
  position: relative;
  justify-content: space-evenly;
  margin-top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.pagination-area {
  margin: 20px;
  display: flex;
  justify-content: center;
}

.detailSearch-area {
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: space-evenly;
}
</style>
